<template>
  <div class="content-box">
    <div class="index-top">
      <img src="../assets/index/index_bg.png" />
    </div>
  </div>
</template>

<script>
import "animate.css";
export default {};
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  margin-top: 20px;
}
.index-top {
  margin: 100px auto 0;
  width: 898px;
  text-align: center;
  height: 120px;
  font-size: 55px;
  line-height: 80px;
  font-family: "楷书";
  letter-spacing: 0.5em;
  margin-top: 55px;
}
.index-top img{
  width: 100%;
}
.content-top {
  width: 100%;
  height: 400px;
}
.lc-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.lc-hr {
  width: 90%;
  height: 10px;
  border-radius: 10px;
  background-color: rgba(126, 115, 115, 0.4);
  position: absolute;
  top: 45%;
  left: 5%;
}
.lc-yuan {
  width: 90%;
  position: absolute;
  top: 38.5%;
  left: 5%;
}
.lc-yuan ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.lc-yuan ul li {
  list-style: none;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid rgba(126, 115, 115, 0.7);
  float: left;
  height: 30px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  .lc-span-1 {
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: turquoise;
    transition: 0.3s;
  }
  .lc-care,
  .lc-care1 {
    position: relative;
    position: absolute;
    width: 150px;
    height: 100px;
    top: -120px;
    //  border: 1px solid black;
    transition: 0.2s;
    background-color: white;
    box-shadow: 0px 0px 1px 1px rgba(126, 115, 115, 0.1);
    .lc-c-span {
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      left: 43%;
      bottom: -20px;
      border: 10px solid rgba(126, 115, 115, 0);
      border-top: 10px solid rgba(126, 115, 115, 0.4);
    }
    .lc-c-img {
      display: block;
      width: 120px;
      height: 120px;
      transition: 1s;
      //  box-sizing: border-box;
      border: 10px solid white;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0px -2px 1px 0px rgba(126, 115, 115, 0.4);
      left: 10%;
      top: -50%;
      background-color: blue;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .lc-c-p {
      display: block;
      width: 100%;
      height: 30px;
      position: absolute;
      bottom: 0;
      text-align: center;
    }
  }
  .lc-care:hover {
    top: -125px;
  }
  .lc-care:hover .lc-c-img {
    transform: rotate(360deg);
  }


  // 下部
  .lc-care1 {
    top: 50px;
    .lc-c-img {
      top: 50%;
    }
    .lc-c-p {
      top: 0;
    }
    .lc-c-span {
      top: -20px;
      border: 10px solid rgba(126, 115, 115, 0);
      border-bottom: 10px solid rgba(126, 115, 115, 0.4);
    }
  }
  .lc-care1:hover {
    top: 55px;
  }
  .lc-care1:hover .lc-c-img {
    transform: rotate(360deg);
  }

}
.lc-yuan ul li:hover .lc-span-1 {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: turquoise;
  }
// .dashboard-editor-container {
//   padding: 12px 32px;
//   position: relative;

//   .chart-wrapper {
//     background: #fff;
//     padding: 16px 16px 0;
//     margin-bottom: 32px;
//     border-radius: 10px;
//     border: solid 1px #e3e3e5;
//   }
//   .chart-left {
//     width: 66%;
//     margin-right: 2%;
//   }
//   .chart-right {
//     width: 32%;
//     background: #ffffff;
//     border-radius: 10px;
//     border: solid 1px #e3e3e5;
//   }
//   .deal-box{
//     text-align: center;
//     height: 40px;
//     line-height: 40px;
//     color: #c1cbd2;
//     margin-top: 10px;
//   }
//   .deal-box span{
//     color: #8b8b8b;
//     font-size: 18px;
//   }
//   .deal-box-chart{
//     width: 80%;
//     background-color: #f9faff;
//     border-radius: 1px;
//     margin: 0 auto;
//     padding: 15px 15px 25px 20px;
//     box-sizing: border-box;
//     margin-top: 50px;
//     color: #c1cbd2;
//   }
//   .deal-box-chart span{
//     line-height: 30px;
//     font-size: 15px;
//   }
// }
// @media (max-width: 1024px) {
//   .chart-wrapper {
//     padding: 8px;
//   }
// }
</style>
